<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <div class="wrap">
      <div class="title">学生系统</div>
      <div id="form">
        <p>姓名<input id="username" type="text" value="张三123" /></p>
        <p>年龄<input id="age" type="text" value="21" /></p>
        <p>
          性别
          <select id="gender">
            <option>男</option>
            <option>女</option>
            <option>你猜</option>
          </select>
        </p>
        <p>
          <input type="button" value="添加" id="addBtn" />
          <input type="button" value="排序" id="sortBtn" />
        </p>
      </div>
      <table id="table">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

    <script>
      var usernameEle = document.querySelector("#username");
      var ageEle = document.querySelector("#age");
      var genderEle = document.querySelector("#gender");
      var addBtn = document.querySelector("#addBtn");
      var tbodyEle = document.querySelector("tbody");
      addBtn.onclick = function () {
        // console.log(111);
        var username = usernameEle.value;
        var age = ageEle.value;
        var gender = genderEle.value;
        var trEle = document.createElement("tr");

        //方式一: td直接作为字符串 通过innerHTML 添加到tr里面
        trEle.innerHTML +=
          "<td>" +
          username +
          "</td><td>" +
          age +
          "</td><td>" +
          gender +
          "</td><td class='del'>删除</td>";
        tbodyEle.appendChild(trEle);

        //获取 删除按钮

        // delEle.forEach(function (delBtn) {
        //   delBtn.onclick = function () {
        //     this.parentNode.remove();
        //   };
        // });
        trEle.onclick = function (e) {
          var target = e.target;
          // console.log(target);
          if (target.classList.contains("del")) {
            // console.log("点击了del");
            target.parentNode.remove();
          }
        };
      };
    </script>
  </body>
</html>
